<template>
  <div class="main_conntainer" :style="{backgroundImage:`url(${bgImg})`}">
     <div class="container">
        <el-button type="primary" icon="el-icon-thumb" circle @click="showPictures" style="margin-bottom:10px"></el-button>
        <transition name="fade">
          <div v-if="show" class="pictures">
             <el-button type="primary" size="small" round  @click="PageOneFm">页面1</el-button>
             <el-button type="primary" size="small" round style="margin-top:10px" @click="PageTwoFm">页面2</el-button>
             <el-button type="primary" size="small" round style="margin-top:10px" @click="PageSanFm">页面3</el-button>

          </div>
        </transition>
     </div>

  </div>
</template>
<script>

export default {
  data() {
    return {
       bgImg:"./picOne.png",
      show: false,  // 是否显示图片
  

    };
  },
  created() {
   
  },
  mounted() {
 
  },
  destroyed() {
   
  },
  methods: {
     showPictures() {
      this.show = !this.show;  // 点击按钮后切换show的值，实现显隐效果
    },
    
     PageOneFm(){
      this.bgImg ="./picOne.png"; 
      

    },
    PageTwoFm(){
     this.bgImg ="./picTwo.png";
     

    },
     PageSanFm(){
     this.bgImg ="./picSan.png";
   
    },
    // websocket启动
    
  },
};
</script>

<style scoped>
.main_conntainer{
  padding:8px;
  width: 100%;
  height:90vh;
  background-size: 100%;
  background-repeat: no-repeat;

}
.container {

}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.6s;
}

.fade-enter, .fade-leave-to {
  opacity:0.6 ;
}

.pictures {
  display: flex;
  flex-direction: column;
 align-items: baseline;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}

.pictures img {
  max-width: 100%;
  margin: 10px;
  /* position: ab; */
}
</style>